<template>
    <div class="user-views">
        <el-card class="user-views-card" shadow="hover">
            <template #header>
                <div class="card-header">
                    <span>账户概览信息</span>
                    <el-button @click="router.push({ name: 'accountProfile' })" type="info" v-blur plain>个人资料
                    </el-button>
                </div>
            </template>
            <!-- 用户详细信息 -->
            <div class="overview-userinfo">
                <div class="user-avatar">
                    <!-- <img :src="userInfo.avatar" alt="头像" /> -->
                    <img src="@/assets/logo.png" alt="头像" />
                    <!-- 头像下两个图标 -->
                    <div class="user-avatar-icons">
                        <div class="avatar-icon-item">
                            <el-tooltip effect="light" placement="right"
                                :content="(userInfo.phonenumber ? '用户已填写手机号':'无手机号')">
                                <Iphone class="icon" size="14"
                                    :color="userInfo.phonenumber ? 'var(--el-color-primary)' : 'var(--el-text-color-secondary)'" />
                            </el-tooltip>
                        </div>
                        <div class="avatar-icon-item">
                            <el-tooltip effect="light" placement="right" :content="(userInfo.email ?'用户已填写邮箱':'无邮箱') ">
                                <Message class="icon" size="14"
                                    :color="userInfo.email ? 'var(--el-color-primary)' : 'var(--el-text-color-secondary)'" />
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <!-- 用户数据 -->
                <div class="user-data">
                    <!-- 用户名加大致时间的招呼 -->
                    <div class="welcome-words">{{ userInfo.userName + getGreet() }}</div>
                    <!-- 部门角色 -->
                    <el-row class="data-item">
                        <el-col :span="4">部门</el-col>
                        <el-col :span="8">
                            <!-- <el-link @click="router.push({ name: 'account/integral' })" type="primary">{{ userInfo.score
                            }}</el-link> -->
                            <el-link type="primary">研发部</el-link>
                        </el-col>
                        <el-col :span="4">角色</el-col>
                        <el-col :span="8">
                            <el-link type="primary">前端工程师</el-link>
                        </el-col>
                    </el-row>
                    <!-- 最后登陆时间 -->
                    <el-row class="data-item">
                        <el-col class="lastlogin title" :span="4">最后登录时间</el-col>
                        <!-- <el-col class="lastlogin value" :span="8">{{ timeFormat(userInfo.lastlogintime) }}</el-col> -->
                        <el-col class="lastlogin title" :span="4">最后登录的IP</el-col>
                        <!-- <el-col class="lastlogin value" :span="8">{{ userInfo.lastloginip }}</el-col> -->
                    </el-row>
                </div>
            </div>
        </el-card>
        <!-- 登录日志或者其他表格类信息 -->
        <el-card class="user-views-card" shadow="hover" header="登录日志或者其他">
            <div class="account-growth" ref="userLogChartRef"></div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ref, toRaw, onBeforeUnmount, reactive, nextTick, onActivated, onMounted, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useUserInfo } from "@/store/userInfo"//用户信息仓库
import { getGreet, timeFormat } from '@/utils/common'
import { useFrontEnd } from "@/store/frontend/index"
// import { ElNotification } from "element-plus"; //处理导航信息
// echarts按需引入
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    LegendComponent,
    LegendComponentOption
} from 'echarts/components';
import {
    LineChart,
    LineSeriesOption
} from 'echarts/charts';
import {
    UniversalTransition
} from 'echarts/features';
import {
    CanvasRenderer
} from 'echarts/renderers';
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, CanvasRenderer, UniversalTransition]
);

type EChartsOption = echarts.ComposeOption<
    TitleComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | LineSeriesOption
>
//获取echarts放置的dom
const userLogChartRef = ref<HTMLElement>()


const userInfo = useUserInfo()
const router = useRouter()
const frontent = useFrontEnd()

//state数据类型
const state: {
    days: string[]
    times: number[],
    charts: any[]
} = {
    days: [],
    times: [],
    charts: []
}

//echarts init初始化方法（初始化+options）
const initUserLogChart = () => {
    /**
     * 断言两种方式：
     *  as HTMLElement
     *  !
     */
    const userLogChart = echarts.init(userLogChartRef.value as HTMLElement)
    const option = {
        title: {
            text: '登录次数',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
            left: 'left'
        },
        xAxis: {
            type: 'category',
            name: 'x',
            splitLine: { show: false },
            data: state.days
        },
        grid: {
            top: 10,
            right: 0,
            bottom: 20,
            left: 50,
        },
        yAxis: {},
        series: [
            {
                name: '次数',
                type: 'line',
                data: state.times
            },

        ]
    }
    //初始化数据
    userLogChart.setOption(option)
    state.charts.push(userLogChart)
}

const echartsResize = () => {
    nextTick(() => {
        for (const key in state.charts) {
            state.charts[key].resize()
        }
    })
}
onActivated(() => {
    // 监听图表容器的大小并改变图表大小
    echartsResize()
})

onMounted(() => {
    //从后端获取所需数据后调用初始化事件
    frontent.overViewEcharts().then(res => {
        let result = toRaw(res)
        state.days = result.days
        state.times = result.times
        initUserLogChart()
    })
    // 响应容器大小的变化
    window.addEventListener('resize', echartsResize)
})
// 待组件卸载之前调用移除监听事件
onBeforeUnmount(() => {
    for (const key in state.charts) {
        state.charts[key].dispose()
    }
    window.removeEventListener('resize', echartsResize)
})
</script>
<style lang="scss" scoped>
.user-views {
    // padding-left: 15px;

    .user-views-card {
        // margin-bottom: 20px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .overview-userinfo {
            display: flex;
            width: 100%;
            background-color: var(--ba-bg-color-overlay);
            overflow: hidden;

            // 用户左侧头像区域
            .user-avatar {
                width: 100px;
                padding: 0 20px;
                margin: 20px 0;
                border-right: 1px solid var(--el-border-color-light);

                img {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                }

                .user-avatar-icons {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-top: 4px;

                    .avatar-icon-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 3px;
                        border: 1px solid var(--el-border-color-light);
                        border-radius: 50%;
                        margin: 3px;
                        cursor: pointer;

                        &:hover {
                            border: 1px solid var(--el-color-primary);
                        }

                        .icon {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 16px;
                            height: 16px;
                        }
                    }
                }
            }

            // 用户右侧数据
            .user-data {
                padding: 0 20px;
                margin: 20px 0;
                width: calc(100% - 100px);

                .welcome-words {
                    color: var(--el-text-color-primary);
                    font-size: var(--el-font-size-medium);
                    padding: 20px 0;
                }

                .data-item {
                    display: flex;
                    align-items: center;
                    font-size: var(--el-font-size-base);
                    padding: 3px 0;
                }
            }
        }

        .account-growth {
            width: 100%;
            height: 300px;
        }
    }
}
// 在style.css中
// @media screen and (max-width: 991px) {
//     .user-views {
//         padding: 0;
//     }
// }

@media screen and (max-width: 992px) {
    .user-data {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .overview-userinfo .welcome-words {
        padding-top: 0;
    }

    .user-avatar {
        display: none;
    }
}

@media screen and (max-width: 1280px) and (min-width: 992px) {
    .lastip {
        display: none;
    }

    .lastlogin.title {
        width: 42%;
        max-width: 42%;
        flex: 0 0 42%;
    }

    .lastlogin.value {
        width: 58%;
        max-width: 58%;
        flex: 0 0 58%;
    }
}

@media screen and (max-width: 460px) {
    .lastip {
        display: none;
    }

    .lastlogin.title {
        width: 42%;
        max-width: 42%;
        flex: 0 0 42%;
    }

    .lastlogin.value {
        width: 58%;
        max-width: 58%;
        flex: 0 0 58%;
    }
}
</style>